<div class="container-fluid">
    采购单编号:<input type="text" id="poId">
    日期范围:<input type="text" id="timeRange" placeholder="起始日期 ~ 截止日期"/>
    处理状态:
    <select id="status">
        <option value=""></option>
        <option value="新增">新增</option>
        <option value="已收货">已收货</option>
        <option value="已收款">已收款</option>
        <option value="已了结">已了结</option>
        <option value="已预付">已预付</option>
    </select>
    <button class="btn btn-primary" type="button" onclick="pomainQuery()">查询</button>
</div>
<table class="table" id="pomainDiv">
    <thead>
    <tr>
        <th>序号</th>
        <th>采购单编号</th>
        <th>创建时间</th>
        <th>供应商名称</th>
        <th>创建用户</th>
        <th>附加费用</th>
        <th>采购商品总价</th>
        <th>采购单总价</th>
        <th>付款方式</th>
        <th>处理状态</th>
    </tr>
    </thead>
    <tbody id="tableBody"></tbody>
</table>

<script id="pomainQueryTemplate" type="text/html">
    {{each data value index}}
    <tr>
        <td>{{index+1}}</td>
        <td>{{value.poId}}</td>
        <td>{{value.createTime}}</td>
        <td>{{value.venderList[0].name}}</td>
        <td>{{value.scmUserList[0].name}}</td>
        <td>{{value.tipFee}}</td>
        <td>{{value.productTotal}}</td>
        <td>{{value.poTotal}}</td>
        <td>{{value.payType}}</td>
        <td>{{value.status}}</td>
    </tr>
    {{/each}}
</script>
<script>
    laydate.render({
        elem: '#timeRange',
        type: 'date',
        range: '~',
        format:'yyyy-MM-dd'
    });
    function pomainQuery() {
        var status=0;
        if($("#status").val()=="新增"){
            status=1
        }
        if($("#status").val()=="已收货"){
            status=2
        }
        if($("#status").val()=="已收款"){
            status=3
        }
        if($("#status").val()=="已了结"){
            status=4
        }
        if($("#status").val()=="已预付"){
            status=5
        }
        if($("#status").val()==""){
            status=0
        }
        Ajax.get(
            "pomainQuery",
            {poId:$("#poId").val(),
            date:$("#timeRange").val(),
            status:status},
            function (result) {
                for(var i=0;i<result.data.length;i++){
                    if(result.data[i].status==1){
                        result.data[i].status="新增"
                    }
                    if(result.data[i].status==2){
                        result.data[i].status="已收货"
                    }
                    if(result.data[i].status==3){
                        result.data[i].status="已收款"
                    }
                    if(result.data[i].status==4){
                        result.data[i].status="已了结"
                    }
                    if(result.data[i].status==4){
                        result.data[i].status="已预付"
                    }
                }
                var div=document.getElementById("tableBody")
                var html=template('pomainQueryTemplate',{data:result.data})
                div.innerHTML=html
            }
        )
    }
</script>